<template>
    <div class='forgetPass'>
        <a-row class='ant-rowForget'>
            <nuxt-link to='./../../login'>返回登录></nuxt-link>
        </a-row>
        <div class='fogetContent'>
             <div class='fogetChange'>
                <div :class="step==1?'firstStep step clickChange':'firstStep step'">
                     <h2>01</h2>
                     <p>验证手机号</p>
                </div>  
                <div class='lines'></div>
                <div :class="step==2?'secondStep step clickChange':'secondStep step'">
                     <h2>02</h2>
                     <p>重置密码</p>
                </div> 
             </div>
            <!-- 重置密码 -->
            <a-form :form="form" @submit="handleSubmit">
                <a-form-item v-if="step==1">
                      <a-input
                        v-decorator="[
                          'mobile',
                          { rules: [{ required: true, message: '手机号不能为空！' }] }
                        ]"
                        placeholder="请输入手机号"  maxLength='11'>
                      </a-input>
                </a-form-item>
                <a-form-item v-if="step==1">
                      <a-input
                        v-decorator="[
                          'smsMsgCode',
                          { rules: [{ required: true, message: '验证码不能为空！' }] }
                        ]"
                        placeholder="请输入验证码"
                        style="width: 260px;"  maxLength='6'>
                      </a-input>
                      <button class="wy-col-15 wy-m-l-20 ant-btn ant-btn-code" style="position: relative;top:-3px;font-size: 16px;background: #E9F4F3;height: 38px;line-height: 38px;width: 150px;" @click="SmsMsgSend">{{smsCodeText}}{{smsCodeText=='获取验证码'?'':'S'}}</button>
                </a-form-item>
                <a-form-item  v-if="step==2">
                    <a-input v-decorator="['password', { rules: [{required: true, message: '密码不能为空!',}, {validator: validateToNextPassword,}],} ]" type="password" placeholder="新密码" maxLength='32' />
                </a-form-item>
                <a-form-item  v-if="step==2">
                    <a-input v-decorator="['password2',{rules: [{required: true, message: '请重新输入密码',}, {validator: compareToFirstPassword,}],}]" type="password" @blur="handleConfirmBlur" placeholder="再次输入新密码" maxLength='32' />
                </a-form-item>
                 <a-form-item>
                    <a-button type="primary" html-type="submit" block>{{step==1?'提交修改':'完成修改'}}</a-button>
                </a-form-item>
            </a-form>
        </div>    
        
    </div>
 
</template>

<script>
    import initGeetest from './../../../utils/gt'
    export default {
        data: () => ({
            // 步骤
            step: 1,
            disabledBool: true,
            
            user: null,

            loginForm:{
                //0个人 1企业
                type:"0",
                userName:"",
                password:"",
                challenge: '',
                validate: '',
                seccode: '',
                bakurl: '',
                captchaId: '',
                gt_server_status: '',
                smsMsgClick: false
            },
            // 短信验证码
            smsCodeText: '获取验证码',
            smsInterval: null,
            smsCode: '',
            mobile:''
        }),
        props: {
            // activeIndex: {type: String, default: '0'},
            // headerPosition: {type: Boolean, default: false}
        },
        computed: {
            // setPosition: function () {
            //     if (this.headerPosition) {
            //         return {position: 'static'};
            //     }
            // },

            // visible () { return this.$store.state.loginDialogVisible } 
        },
        beforeCreate() {
            this.form = this.$form.createForm(this);
        },
        created: function () {
            
        },
        methods: {
            // 输入框验证是否都已输入
            inputValue () {
                if (this.loginForm.userName !=='' && this.loginForm.password !=='' && this.disabledBool){
                    this.disabledBool = false
                }
            },
            // 隐藏登录框
            hideLogin() {
                this.$store.commit('HANDLE_LOGIN', false)
            },
            //检测确认密码
            handleConfirmBlur(e) {
                const value = e.target.value;
                this.confirmDirty = this.confirmDirty || !!value;
            },
            //检测确认密码
            compareToFirstPassword(rule, value, callback) {
                const form = this.form;
                if(value && value !== form.getFieldValue('password')) {
                    callback('您输入的两个密码不一致!');
                } else {
                    callback();
                }
            },
            //检测密码      
            validateToNextPassword(rule, value, callback) {
                const form = this.form;
                if(value && this.confirmDirty) {
                    form.validateFields(['password'], {
                        force: true
                    });
                }
                callback();
            },
            // 修改提交信息
            handleSubmit (e) {
                console.log('handleSubmit')
                e.preventDefault();
                if (this.smsMsgClick) return;
                this.form.validateFieldsAndScroll((err, values) => {
                    if(!err) {
                        if (this.step == 1) {
                            this.smsCode = values.smsMsgCode;
                            this.mobile = values.mobile;
                            this.SmsMsgVerify(values);
                        }
                        if (this.step == 2)  {
                            values.smsCode = this.smsCode;
                            values.mobile = this.mobile;
                            this.passwordResetMobile(values);
                        }
                    }
                });
            },
            // 获取短信验证码
            async SmsMsgSend () {
                this.smsMsgClick = true;
                setTimeout(()=>{this.smsMsgClick = false},300)
                if (this.smsCodeText != '获取验证码') return;
                let mobile = this.form.getFieldValue('mobile')
                if (!mobile) {
                    this.$message.error('手机号格式不正确')
                    return;
                }
                if (mobile.length != 11) {
                    this.$message.error('手机号格式不正确')
                    return;
                }
                if (this.smsCodeText == '获取验证码') {
                    this.smsCodeText = 60;
                    this.smsInterval = setInterval(()=>{
                      this.smsCodeText = this.smsCodeText -1
                      if (this.smsCodeText == 0) {
                        this.smsCodeText = '获取验证码'
                        clearInterval(this.smsInterval);
                        this.smsInterval = null
                      }
                    },1000)
                }
                const res = await this.$store.dispatch('SmsMsgSend', {
                  mobile: mobile,
                  type: 'reset'
                })
                if (res.code === '0000') {
                    this.$message.success('短信验证码已发送！');
                    this.form.resetFields({
                        smsMsgCode: null
                    });
                    // this.$router.go(0);
                }else{
                  this.$message.error(res.message);
                }
            },
            // 短信验证码验证
            async SmsMsgVerify (values) {
                const res = await this.$store.dispatch('SmsMsgVerify', values)
                if (res.data) {
                    this.$message.success('短信验证码验证成功');
                    this.step = 2;
                }else{
                    this.$message.error(res.message)
                }
            },
            // 重置密码
            async passwordResetMobile (values) {
                const res = await this.$store.dispatch('passwordResetMobile', values)
                if (res.code == '0000'){
                    this.$message.success('重置密码成功');
                    this.form.resetFields();
					this.$router.push('/Login');

                }else{
                    this.$message.error(res.message)
                }
            }
        }
    }
</script>
<style lang="scss">
@import "./../../../assets/css/login.scss";
</style>
